<template>
	<view class="wap_content">
		<u-navbar title="歌单大厅" fixed placeholder :autoBack="true">
		</u-navbar>
		<view class="song_box" v-if="songList.length>0">
			<view class="song_item_box">
				
				<view class="song_item" v-for="(item, index) in songList" :key="item.id" @click="uni.$link('/pages/put/put?name='+item.pname+'&id='+item.id)">
					<view class="song_poser_box">
						<image class="song_poser_img"
							:src="item.picUrl"
							mode="widthFix"></image>
						<view class="song_poser_desc display_flex_center">
							<u-icon color="#ffffff" size="16" name="play-right"></u-icon> <text>{{ uni.$friendNum(item.playCount) }}</text>
						</view>
					</view>
					<view class="song_title">{{ item.name }}</view>
				</view>

			</view>
		</view>
		
		<u-empty mode="history" text="歌单么有了" v-if="songList.length == 0"></u-empty>
		<x-play-card v-if="showPlayCard"></x-play-card>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				scrollTop:0,
				limit:10,
				offset:0,
				songList:[],
			}
		},
		computed:{
			...mapState(['showPlayCard'])
		},
		onLoad() {
			this.getSongList();
		},
		onReachBottom() {
			this.offset+=this.limit;
			this.getSongList();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			/**
			 * 获取歌单
			 */
			getSongList(){
				let _this = this;
				let requestData = {
					url: '/top/playlist?limit='+_this.limit+'&offset='+_this.offset,
					loading: true,
					type: "get",
				};
				uni.$ajax(requestData).then(res => {
					let songListArr = res.playlists || "";
					let songList = [];
					if (songListArr) {
						songListArr.forEach(item=>{
							let {id,name,coverImgUrl,playCount} = item;
							let pname = name.replaceAll("【","").replaceAll("】","").slice(0,4) || "百万红心";

							songList.push({id,name,picUrl:coverImgUrl,playCount,pname});
						})
						if (_this.songList.length>0) {
							_this.songList = [..._this.songList,...songList];
						} else {
							_this.songList = songList;
						}
					}
				})
			},
		}
	}
</script>

<style>
	.wap_content {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.song_box {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.song_box_title {
		width: 100%;
		height: 100rpx;
	}

	.song_box_title_l {
		font-size: 32rpx;
		font-weight: bold;
	}

	.song_box_title_r {
		font-size: 28rpx;
		color: #666;
	}

	.song_item_box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.song_item {
		width: 340rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.song_poser_box {
		width: 340rpx;
		height: 340rpx;
		overflow: hidden;
		position: relative;
	}

	.song_poser_img {
		width: 100%;
	}

	.song_poser_desc {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.song_poser_desc text {
		font-size: 26rpx;
		color: #fff;
	}

	.song_title {
		font-size: 32rpx;
		box-sizing: border-box;
		padding: 10rpx 0;
	}

	.search_box {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx 0;
	}
</style>